<template>
	<div class="quick-link-container" :class="className">
		<!-- 轮播图列表 -->
		<div class="swiper-list" ref="swiperListRef" v-if="LinkGroup.length">
			<div class="quick-link-swiper" ref="swiperItemRef" v-for="(item, itemIndex) in LinkGroup" :key="itemIndex" :style="swiperStyle">
				<div class="quick-link-item" v-for="(LinkItem, index) in item" :key="index">
					<div class="quick-link-item-icon">
						<img :src="LinkItem.imgUrl" alt="" v-if="LinkItem.imgUrl" />
						<img :src="NoDataImg" alt="" v-else />
					</div>
					<div class="quick-link-item-title">{{ LinkItem.title }}</div>
				</div>
			</div>
		</div>
		<div class="notList" v-else>暂无菜单项</div>

		<!-- 轮播图按钮 -->
		<div class="quick-link-swiper-btn" v-if="LinkGroup.length">
			<div
				class="btn"
				v-for="(item, index) in swiperNum"
				:key="item"
				:class="index + 1 === state.current ? 'active' : ''"
				@click="changeActive(index)"
			></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, computed, ref, watch } from 'vue';
import NoDataImg from '/@/assets/images/noData.png';

const swiperListRef = ref();
const swiperItemRef = ref();

const props = defineProps({
	className: {
		type: Object,
		default: () => {},
	},
	data: {
		type: Object,
		default: () => {},
	},
});
watch(
	() => props.data,
	(val) => {
		if (val.data && val.data.list) {
			state.links = JSON.parse(JSON.stringify(val.data.list));
			state.rowItemNum = JSON.parse(JSON.stringify(val.data.rowNum));
		}
	},
	{ deep: true }
);

const state = reactive({
	links: [],
	current: 1, // 当前第几页
	rowItemNum: 3, // 一行最多显示多少个
});

// 分页数量
const swiperNum = computed(() => {
	// console.log('(state.links.length || props.data.data.list)', (state.links.length || props.data.data.list))
	// console.log('(state.links.length || props.data.data.list?.length)', (state.links.length || props.data.data.list?.length))
	// console.log('props.data.data.rowNum', props.data.data.rowNum)
	// console.log('state.links.length', state.links.length)
	// console.log('props.data.data.list', props.data.data.list)
	return state.links.length || props.data.data.list
		? Math.ceil((state.links.length || props.data.data.list?.length) / (props.data.data.rowNum * 2))
		: 0;
});
// 行内样式
const swiperStyle = computed(() => {
	return `grid-template-columns: repeat(${props.data.data.rowNum || state.rowItemNum}, 69px)`;
});
// 对金刚区菜单进行分组
const LinkGroup = computed(() => {
	let cur = 0;
	const arr = [];
	let arrMap = state.links.length ? state.links : props.data.data.list;
	// console.log('swiperNum=====', swiperNum.value)
	for (let i = 0; i < swiperNum.value; i++) {
		arr.push([]);
	}
	(state.links.length || props.data.data.list) &&
		arrMap.map((ele, index) => {
			if (index === (props.data.data.rowNum || state.rowItemNum) * 2 * (cur + 1)) {
				cur = cur + 1;
			}
			arr[cur].push(ele);
		});
	return arr;
});

function changeActive(index: number) {
	let swiperItemWidth = swiperItemRef.value[0].offsetWidth;
	let current = state.current;
	state.current = index + 1;
	let left = parseInt(swiperItemRef.value[0].style.marginLeft) ? parseInt(swiperItemRef.value[0].style.marginLeft) : 0;
	if (current > state.current) {
		swiperItemRef.value[0].style.marginLeft = left + swiperItemWidth + 'px';
	} else if (current < state.current) {
		swiperItemRef.value[0].style.marginLeft = left - swiperItemWidth + 'px';
	}
}
</script>

<style lang="scss" scoped>
.quick-link-container {
	width: 100%;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;

	// overflow: hidden;
	// position: relative;
	.swiper-list {
		display: flex;
		overflow: hidden;

		// overflow: scroll;
		// position: absolute;
		.quick-link-swiper {
			background-color: #fff;
			max-width: 100%;
			min-width: 100%;
			display: grid;
			justify-content: space-between;
			grid-row-gap: 12px;
			margin-bottom: 12px;

			&:nth-child(0) {
				margin-left: 0px;
			}

			.quick-link-item {
				height: 90px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 10px 0;

				.quick-link-item-icon {
					width: 55px;
					height: 55px;
					border-radius: 50%;
					// box-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.2);
					// border-radius: 100px;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.quick-link-item-title {
					width: 100%;
					height: 21px;
					text-align: center;
					line-height: 21px;
				}
			}
		}
	}

	.notList {
		width: 100%;
		height: 90px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		color: #666;
	}

	.quick-link-swiper-btn {
		width: 100%;
		padding: 9px;
		// background-color: aqua;
		display: flex;
		justify-content: center;

		.btn {
			width: 27px;
			height: 4px;
			border-radius: 4px;
			background-color: rgb(172, 172, 172);
			margin-right: 9px;
			cursor: pointer;

			&:last-child {
				margin-right: 0;
			}

			&.active {
				background-color: rgb(34, 111, 234);
			}
		}
	}
}
</style>
